<template>
  <div>
    <div style="margin: 10px 0">
      <el-select v-model="leagueSeason" clearable placeholder="请选择联赛赛季" style="width: 200px;margin-right: 10px;" >
        <el-option v-for="item in seasonoptions" :key="item.name" :label="item.name" :value="item.value">
            {{ item.name }}
        </el-option>
      </el-select>

      <el-select v-model="leagueId" clearable placeholder="请选择联赛" style="width: 200px;margin-right: 10px;" @change="changeLeague()">
        <el-option v-for="item in leagueoptions" :key="item.leagueName" :label="item.leagueName" :value="item.id">
            {{ item.leagueName }}
        </el-option>
      </el-select>

      <el-select v-model="teamId" clearable placeholder="请选择球队" style="width: 200px;margin-right: 10px;">
        <el-option v-for="item in teamoptions" :key="item.id" :label="item.teamName" :value="item.id">
            {{ item.teamName}}
        </el-option>
      </el-select>

      <el-select v-model="homeAway" clearable placeholder="请选择主客场" style="width: 200px;margin-right: 10px;">
        <el-option value="主场">主场</el-option>
        <el-option value="客场">客场</el-option>
      </el-select>

      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>


    <!-- <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
        <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
    </div> -->

    <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="teamId" label="球队ID" width="80"></el-table-column>
      <el-table-column prop="team.teamName" label="球队名称" width="80"></el-table-column>
      <el-table-column prop="team.teamImg" label="球队图片">
      
        <template slot-scope="scope">
          <div v-if="scope.row.team.teamImg">
             <img :src="scope.row.team.teamImg" width="100" height="100">
               </div>
          <div v-else>无图片</div>           
        </template>
      </el-table-column>
      <el-table-column prop="totalRounds" label="比赛数"></el-table-column>
      <el-table-column prop="totalWin" label="胜场"></el-table-column>
      <el-table-column prop="totalFlatten" label="平场"></el-table-column>
      <el-table-column prop="totalLose" label="负场"></el-table-column>
      <el-table-column prop="totalGoal" label="总进球数"></el-table-column>
      <el-table-column prop="totalFumble" label="总失球数"></el-table-column>
      <el-table-column prop="totalControl" label="平均控球率"></el-table-column>
      <el-table-column prop="totalShoot" label="总射门数"></el-table-column>
      <el-table-column prop="totalOntarget" label="总射正数"></el-table-column>
      <el-table-column prop="totalPass" label="总传球数"></el-table-column>
      <el-table-column prop="totalOkpass" label="总成功传球数"></el-table-column>
      <el-table-column prop="totalSurpass" label="总过人数"></el-table-column>
      <el-table-column prop="totalOffside" label="总越位数"></el-table-column>
      <el-table-column prop="totalFoul" label="总犯规数"></el-table-column>
      <el-table-column prop="totalYcard" label="总黄牌数"></el-table-column>
      <el-table-column prop="totalRcard" label="总红牌数"></el-table-column>
      <el-table-column prop="totalPoints" label="总积分"></el-table-column>
      <el-table-column prop="leagueSeason" label="联赛赛季"></el-table-column>
      <el-table-column prop="league.leagueName" label="联赛名称"></el-table-column>
      <el-table-column prop="homeAway" label="主客场"></el-table-column>

      <el-table-column label="操作"  width="280" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="primary" @click="handleagueWatch(scope.row)" ><i class="el-icon-medal"></i>查看参加的联赛</el-button>
          <el-button type="success" @click="handleEdit(scope.row)"> <i class="el-icon-edit"></i>编辑</el-button>
          <el-button type="warning" @click="teamAbility(scope.row)" ><i class="el-icon-s-markting"></i>球队能力</el-button>
          <el-button type="info" @click="teamPlayer(scope.row)" ><i class="el-icon-s-markting"></i>查看球队阵容</el-button> -->
          <!-- <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
export default {
  name:'TeamData',
  data(){
    return{
      tableData: [],
      total: 0,//总数
      current: 1,//当前页
      size: 5,//每页数量
      leagueId:"",//联赛id查询用
      teamId:"",//球队id查询用
      seasonoptions:[],//赛季选择
      leagueoptions:[],//联赛选择
      teamoptions:[],//球队选择
      leagueSeason:"",//赛季查询
      homeAway:"",//主客场选择
    }
  },
  created(){
    this.load()
  },
  methods:{
    load(){
      this.request.get("/teamdata/pageTeamData/",{
        params:{
          current:this.current,
          limit:this.size,
          leagueId:this.leagueId,
          teamId:this.teamId,
          leagueSeason:this.leagueSeason,
          homeAway:this.homeAway
        }
      }).then(res=>{
        console.log("111111111111111111111      "+this.leagueId)
        console.log(res.pageTeamData)
        console.log(res.pageTeamData.records)
        this.tableData = res.pageTeamData.records
        this.total = res.total
      }),
      //查询所有赛季信息到选择框中
      this.request.get("/league/season").then(res => {
        console.log(res.data)
        this.seasonoptions = res.data
      })
      //查询所有联赛信息到选择框中
      this.request.get("/league/findall").then(res=>{
        console.log(res.data)
        this.leagueoptions = res.data
      }),
      //查询所有球队信息到选择框中
      this.request.get("/team/findall").then(res=>{
        this.teamoptions = []
        console.log(res.data)
        this.teamoptions = res.data
      })

    },
     //选择联赛时，查询该联赛的轮次和球队
     changeLeague(){
      this.request.get("/league/findTeamByLeagueId/"+this.leagueId).then(res=>{
        if(res.code === '200'){
          console.log("111111111111111111111      "+this.leagueId)
          this.teamoptions = []
          console.log(res.data)
          this.teamoptions = res.data
        }else{
          this.$message.error("查找失败")
        }
      })
     },
     handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    },
    reset() {
      this.teamId = ""
      this.leagueId = ""
      this.homeAway=""
      this.leagueSeason=""
      this.load()
    },
    //分页每页大小
    handleSizeChange(size) {
      console.log(size)
      this.size = size
      this.load()
    },

    //分页第几页
    handleCurrentChange(current) {
      console.log(current)
      this.current = current
      this.load()
    },

  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
.avatar-uploader {
  text-align: center;
  padding-bottom: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 138px;
  height: 138px;
  display: block;
}
</style>